<template>
    <div class = "Addbasetwo" v-loading = "loading">
        <el-container>
        <el-container>
        <el-main>
            <div class = "Box-wrapper">
            <div style="padding-bottom:20px;" class = "title-wrapper">
                 <el-breadcrumb separator="/">
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" @click.native = "goBack">基地管理</el-breadcrumb-item>
                <el-breadcrumb-item>介绍添加</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-form ref="form" status-icon  label-width="100px">
            <el-form-item label="介绍须知">
                <el-input :rows="5" type="textarea" v-model="form[0].content"></el-input>
            </el-form-item>
            <el-form-item label="介绍须知图片">
                <el-upload
                :action="this.IP"
                list-type="picture-card"
                :data="{type:'image'}"
                :file-list="imagesone"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="实践须知">
                <el-input :rows="5" type="textarea" v-model="form[1].content"></el-input>
            </el-form-item>
          
            <el-form-item label="预定须知">
                <el-input :rows="5" type="textarea" v-model="form[2].content"></el-input>
            </el-form-item>
         
            <el-form-item label="安全须知">
                <el-input :rows="5" type="textarea" v-model="form[3].content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="register('ruleForm')">立即创建</el-button>
            </el-form-item>
            </el-form>
            </div>
        </el-main>
        </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
            form:[
                {
                    content: '',
                },
                {
                    content:'',
                },
                {
                    content:'',
                },
                {
                    content:''
                }
            ],
        imagesone:[],
        loading: false,
        dialogImageUrl: [],
        dialogVisible: false,
        }
    },
    created() {
        this.List()
    },
    methods: {
       List(){
        let baseId = this.$route.query.baseId
        if(baseId){
          this.loading = true
          this.$api.Basetoaddordelete.baseintroduce(baseId).then(res => {
            //   当获取到内容时进入判断
              if(res.data.length !== 0){
                this.form = res.data;  
                // this.imagesone =  res.data.flatMap(item => item.images).filter(item => item != undefined).map(item => ({url:item.url}));
                   this.imagesone = this.form.flatMap(item => item.images).filter(item => item != undefined)
              }
              this.loading = false
          })
        } 
        },
        //后退
        goBack(){
            this.$router.push('Addbase')
        },
        //添加
        register(formName){
            this.loading = true
                   let Add = {
                        introduction: {
                            imgIds:this.dialogImageUrl,
                            content:this.form[0].content
                        },
                        practice: {
                            content:this.form[1].content
                        },
                        booking: {
                            content:this.form[2].content
                        },
                        safety: {
                            content:this.form[3].content
                        }
                    }
                    let baseId = this.$route.query.baseId
                    this.$api.Basetoaddordelete.baseIntroductiontomodify(Add,baseId).then(res => {
                        if(res.code === 200){
                          this.open1('添加成功','success','成功')
                          this.$router.push(`Addbase?compile=${this.$route.query.compile}`)
                        } else {
                          this.open1('添加失败','warning','失败')
                        }
                        this.loading = false
                    }).catch(err => {
                        console.log(err)
                        this.open1('添加失败','warning','失败')
                    })
        },
         open1(item,type,title) {
            this.$notify({
            title: title,
            message: item,
            type: type
            });
        },
        //图片上传
        uploadFile(file){
            console.log(file)
        },
        handleAvatarSuccess(response, file, fileList){
        this.dialogImageUrl.push(file.response.data.id)
        },
        handleRemove(file, fileList) {
          this.dialogImageUrl = this.dialogImageUrl.filter(item => item !== file.response.data.id)
        },
        handlePreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
    },
}
</script>
<style scoped>
    .Addbasetwo{
        width:100%;
    }
</style>
